<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tomcat Message Exchanger (using Comet)</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
	jQuery(function($) {

		var ajax = null;

		function OnMessage() {
			ajax = $.ajax({
				type : 'GET',
				url : 'exchanger',
				dataType : 'html',
				success : function(text) {
					$('#messages').append('<span>' + text + '</span></br>');
					OnMessage();
				},
				error : function() {
					$('#chat').hide();
					$('#connexion').show();
					$('#messages').empty();
					ajax = null;
				}
			});
		}

		$('#connect').click(function() {
			$.ajax({
				type : 'POST',
				url : 'exchanger',
				data : {
					message : '/subscribe',
				},
				success : function() {
					OnMessage();
					$('#connexion').hide();
					$('#chat').show();
				},
				error : function() {

				},
			});
		});

		$('#send').click(function() {
			if (ajax) {
				$.ajax({
					type : 'POST',
					url : 'exchanger',
					data : {
						message : $('#message').val()
					},
					success : function() {
						$('#message').val('');
					},
					error : function() {

					},
				});
			}
		});

		$('#disconnect').click(function() {
			if (ajax) {
				$.ajax({
					type : 'POST',
					url : 'exchanger',
					data : {
						message : '/unsubscribe'
					},
					success : function() {
						$('#chat').hide();
						$('#connexion').show();
						$('#messages').empty();
					},
					error : function() {

					},
				});
			}
		});
	});
</script>
<style type="text/css">
legend {
	font-weight: bold;
}

#chat {
	display: none;
}

#messages {
	margin: 5px;
	padding: 5px;
	border: 2px groove #f5f5f5;
}
</style>
</head>
<body>
	<h2>Message Exchanger</h2>
	<fieldset id="connexion">
		<legend>Connection</legend>
		<button id="connect">Connect</button>
	</fieldset>
	<fieldset id="chat">
		<legend>Message Exchanger</legend>
		<div id="messages" style="font-family: monospace;"></div>
		<label for="message">Message: </label><input id="message" type="text">
		<button id="send">Send</button>
		<button id="disconnect">Disconnect</button>
	</fieldset>
</body>
</html>
